<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ace Editor 自动补全示例</title>
    <!-- 引入 Ace Editor 的 CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js"></script>
</head>
<body>
    <div id="editor" style="height: 500px; width: 100%;"></div>

    <script>
        // 初始化 Ace Editor
        const editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/sql");

        // 启用自动补全
        ace.require("ace/ext/language_tools").setCompleters([]);
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true,
        });

        // 模拟的本地数据库表名
        const mockDatabaseTables = {
            "db1": ["table1", "table2", "table3"],
            "db2": ["table4", "table5", "table6"]
        };

        // 定义自定义补全器
        const customCompleter = {
            getCompletions: function(editor, session, pos, prefix, callback) {
                // 获取用户输入的数据库名
                const cursorPosition = editor.getCursorPosition();
                const currentLine = session.getLine(cursorPosition.row);
                // const dbNameMatch = currentLine.match(/USE\s+(\w+)\./i);
                const dbNameMatch = currentLine.match(/\w+\./i);

                if (dbNameMatch) {
                    console.log(22222222222222)
                    console.log(dbNameMatch)
                    console.log(typeof dbNameMatch[0])
                    const dbName = dbNameMatch[0].replace("\.","")
                    console.log(dbName);
                    // 从本地模拟数据中获取表名
                    const tables = mockDatabaseTables[dbName] || [];
                    let completions = tables.map(tableName => ({
                        caption: tableName,
                        value: tableName,
                        meta: "table"
                    }));
                    callback(null, completions);
                } else {
                    callback(null, []);
                }
            }
        };

        // 将自定义补全器添加到 Ace Editor
        editor.completers = [customCompleter];

        // // 监听内容更改事件
        // editor.session.on('change', function(delta) {
        //     // 在这里您可以添加逻辑来更新自动补全提示
        //     console.log("Editor content changed:", delta);
        //
        //     // 手动触发自动补全提示（如果需要）
        //     const cursorPosition = editor.getCursorPosition();
        //     const prefix = editor.session.getTextRange({
        //         start: { row: cursorPosition.row, column: 0 },
        //         end: cursorPosition
        //     });
        //     editor.completers.forEach(completer => {
        //         completer.getCompletions(editor, editor.session, cursorPosition, prefix, function(err, completions) {
        //             if (!err && completions.length) {
        //                 editor.completer.showPopup(editor);
        //                 editor.completers=[...completions]
        //             }
        //         });
        //     });
        // });
    </script>
</body>
</html>
